<template>
  <view>
    <view class="date-display">
      <view
        class="date-select-box center"
        :class="daterange.start ? 'date-active' : ''"
        @click="toSelectDate(daterange.start, 'start')"
      >
        {{ emptyFm(daterange.start, '请点击选择日期') }}
      </view>
      <view class="center">-</view>
      <view
        class="date-select-box center"
        :class="daterange.end ? 'date-active' : ''"
        @click="toSelectDate(daterange.end, 'end')"
        >{{ emptyFm(daterange.end, '请点击选择日期') }}</view
      >
    </view>
    <view class="daterange-tags">
      <block v-for="(tag, tagi) in dateTagList" :key="tagi">
        <view
          class="daterange-tag"
          :class="datetag === tag.value ? 'is-actived' : ''"
          @click="handleTagDate(tag)"
        >
          <text class="daterange-tag--text">{{ tag.label }}</text>
        </view>
      </block>
    </view>
    <view class="date-range-footer">
      <view class="center btn reset" @click="reset">重置</view>
      <view class="center btn confirm" @click="confirm">确定</view>
    </view>
    <t-date-time-picker
      v-model="dateTimeValue"
      v-model:open="openDateTimePicker"
      format="YYYY-MM-DD"
      v-bind="getRangBind"
      @confirm="datePickConfirm"
    />
  </view>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { computed, ref } from 'vue'

// ----------------------------- hooks -----------------------------

// ----------------------------- 组件 -----------------------------

// ----------------------------- 其他引入 -----------------------------
import { getRangeDate } from '@/utils/format/dateTime'
import { emptyFm } from '@/utils/format/display'
const emits = defineEmits(['confirm'])
//----------------------------- 变量声明区 -----------------------------
const datetag = ref('')
const daterange = ref<{ end: any; start: any; tag: any }>({
  end: undefined,
  start: undefined,
  tag: undefined,
})
const dateTagList = ref([
  { value: '-7', label: '本周' },
  { value: '-14', label: '上周' },
  { value: '-30', label: '本月' },
  { value: '-60', label: '上月' },
  { value: '-1', label: '昨日' },
  { value: '7', label: '近7天' },
  { value: '15', label: '近15天' },
  { value: '30', label: '近30天' },
])
const openDateTimePicker = ref(false)
const dateTimeValue = ref('')
const currentPickType = ref('start')
// ----------------------------- hooks使用区 -----------------------------
const getRangBind = computed(() => {
  return currentPickType.value == 'start'
    ? {
        minTime: undefined,
        maxTime: daterange.value.end,
      }
    : {
        minTime: daterange.value.start,
        maxTime: undefined,
      }
})
// ----------------------------- 钩子函数区 -----------------------------

//  ----------------------------- 自定义方法区 -----------------------------
function handleTagDate(tag: any) {
  daterange.value = { ...getRangeDate(tag.value), tag: tag.label }
  // console.log(daterange.value, 'daterange.value')

  datetag.value = tag.value
}
function reset() {
  datetag.value = ''
  daterange.value = {
    start: undefined,
    end: undefined,
    tag: undefined,
  }
}
function confirm() {
  emits('confirm', daterange.value)
}
function toSelectDate(date: string, type: 'start' | 'end') {
  currentPickType.value = type
  dateTimeValue.value = date
  openDateTimePicker.value = true
}
function datePickConfirm(date: string) {
  if (currentPickType.value == 'start') {
    daterange.value.start = date
  } else {
    daterange.value.end = date
  }
  datetag.value = ''
  daterange.value.tag = undefined
}
</script>
<style lang="scss" scoped>
.daterange-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 10rpx;
  .daterange-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 40rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    font-size: 28rpx;
    color: #525252;
    background-color: #f5f5f5;
    border-radius: 999rpx;

    &--text {
      position: relative;
      z-index: 1;
    }

    &.is-actived {
      color: blue;
      background-color: #fff;

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        content: '';
        background-color: blue;
        opacity: 0.05;
      }
    }
  }
}
.date-display {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  .date-select-box {
    background-color: #f1f1f1;
    border-radius: 999rpx;
    width: 350rpx;
    padding: 15rpx;
    color: #aaaaaa;
  }
  .date-active {
    color: #525252;
  }
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.date-range-footer {
  padding: 30rpx 0;
  display: flex;
  justify-content: space-evenly;
  .btn {
    padding: 20rpx 0;
    border-radius: 999rpx;
    width: 350rpx;
    font-weight: bold;
  }
  .confirm {
    color: #fff;
    background-color: #422fcc;
  }
  .reset {
    border: 1rpx solid #929292;
  }
}
</style>
